<!--<?php $this->view->partial('common/chat') ?>-->
<div class="row">
	<div class="profile-upper medium-10 medium-centered large-10 large-centered columns" style="margin-top:2rem;">
		<div class="cover-photo large-12 columns" style="background:#555555 url(<?php echo BASE_URI; ?>img/cover_photo/2.jpg);" data-equalizer>
			<div class="cover-left medium-4 large-4 text-center columns"data-equalizer-watch>
				<div class="img medium-3 medium-centered large-3 large-centered column" style="background:#555555 url(<?= IMAGE_URL_SMALL.$info->profile_pic; ?>);background-size:100% 100%;">
				<div id="change-pic" class="">
					<a data-reveal-id="changeprimarydp"><i id="dpxmain" class="transX fa fa-camera-retro fa-2x"></i></a>
				</div>
				</div>
				<h3><?= $info->fname.' '.$info->lname ?></h3>

				<ul class="text-left">
					<li><img src="<?=BASE_URI?>img/icons/AboutJobIcon.png"> IT Programmer at <a href=""> Remotestaff Inc.</a></li>
					<li><img src="<?=BASE_URI?>img/icons/AboutLocationIcon.png"> Manila, Philippine</li>
					<li><img src="<?=BASE_URI?>img/icons/AboutEducationIcon.png"> Graduated at<a href=""> Adamson University</a></li>					
				</ul>
			</div>
			<div class="cover-right medium-8 large-8 columns" data-equalizer-watch>
				<div class="medium-6 large-6 column">
					<span class="label">
					<i class="fa fa-camera-retro fa-lg"></i>
					<a id="btnEditCover" style="color:white;">&nbsp;Edit Cover Photo</a>
					</span>
				</div>
					<?php 
					$isConnected = UserConnectionsTb::checkIfConnected($this->session->get('user_id'),$_GET['bhd']);
					if(($this->session->get('user_id') != $_GET['bhd'])){ ?>	
				<div class="text-right medium-6 large-6 column" style="padding:1rem;">					
					
					<ul class="btngrp button-group">
					<?php if($isConnected == false){ ?>
					  <li class="btnconnnect"><a href="#" class="tiny button"><i class="fa fa-user fa-lg"></i> Connect</a></li>
					<?php } ?>
					  <li class="btnmessage"><a href="#" class="tiny button">Message &nbsp;|</a></li>
					  <li class="btnmore"><a href="#" class="tiny button"><i class="fa fa-circle"></i>&nbsp;<i class="fa fa-circle"></i>&nbsp;<i class="fa fa-circle"></i></a></li>
					</ul>
				</div>
				<?php }//end of if?>	
				<div class="opacity-btm large-12 column">
					<dl class="tabs" data-tab >
	  					<dd class="active" >
	  						<a class="text-center" href="#post-tab">
								<h5 id="total_posts"><?= UserFeedsTb::countPosts($_GET['bhd']); ?></h5>posts
	  						</a>
	  					</dd>
	  					<dd class="" >
	  						<a class="text-center" href="#connection-tab">
								<h5>56,700</h5>connections
	  						</a>
	  					</dd>
	  					<dd class="" >
	  						<a class="text-center" href="#group-tab">
								<h5>67,009</h5>groups
	  						</a>
	  					</dd>
	  					<dd class="" >
	  						<a class="text-center" href="#forum-tab">
								<h5>890,900</h5>forum threads
	  						</a>
	  					</dd>
	  				</dl>
  				</div>

			</div>
		</div>
	</div>
</div>

<div class="profile-dn row">
	<div class="profile-wall medium-10 medium-centered large-10 large-centered column">
		<div class="profile-left-wall medium-7 large-7 columns">

			<div class="tabs-content">
			  <div class="content active" id="post-tab" style="padding:0;">
			  	<?php $this->view->partial('common/wall_posts'); ?>
			  </div>

			  <div class="conn2ndTab content" id="connection-tab">

				<dl class="tabs" data-tab>
				  	<dd class="active">
					  	<a class="dda" href="#connectionlist">
					  	&nbsp;&nbsp;<i class="fa fa-share-alt"></i> Connection List
					  	</a>
				  	</dd>
				  	<dd>
					  	<a class="ddb" id="tabPending" href="#pendingrequest">
					  	&nbsp;&nbsp;<i class="fa fa-user"></i> Pending Request
					  	</a>
				  	</dd>
				</dl>

				<div class="tabs-content" style="margin-top:1rem;">
				  	<div class="content active" id="connectionlist">
			  			<?php $this->view->partial('common/connections'); ?>
				  	</div>
				  	<div class="content" id="pendingrequest">
			  			<?php $this->view->partial('common/pendingrequest'); ?>
				  	</div>
				</div>


			  </div>

			  <div class="content" id="group-tab">
			  	<h1>group....</h1>
			  </div>
			  <div class="content" id="forum-tab">
			  	<h1>forum....</h1>
			  </div>
			</div>

	
		</div>
<!--Right div-->		
		<div class="profile-right-wall medium-5 large-5 column">
			<div class="right-bx-contain large-12 column">
				<div class="right-head large-12 column">
					<p>Groups</p>
				</div>
					<div class="right-content large-12 column">
						<div class="user-dp medium-2 large 2 column" style="background:url(img/user_dp/micro.jpg);background-size:cover;">
						</div>
						<div class="userinfo medium-7 large-8 column">
							<a href="">Microsoft Partner</a>
							<p><small>230 members</small></p>
						</div>
						<div class="text-right btn-lst medium-1 large-2 columns">
							<span class="right radius label">107</span>
						</div>
					</div>
					<div class="right-content large-12 column">
						<div class="user-dp medium-2 large 2 column" style="background:url(img/user_dp/symb.jpg);background-size:cover;">
						</div>
						<div class="userinfo medium-7 large-8 column">
							<a href="">Php User Group</a>
							<p><small>80 members</small></p>
						</div>
						<div class="text-right btn-lst medium-1 large-2 columns">
							<span class="right radius label">107</span>
						</div>
					</div>
				<div class="see-more text-right large-12 column">
					<a href="">See more group</a>
				</div>
			</div>
		</div>
			<div class="large-12 columns" style="padding:0;">
				<?php $this->view->partial('common/footer'); ?>
			</div>
<!--End Right div-->
	</div>
</div>




<script type="text/javascript"> var G_USER_ID = "<?= $_GET['bhd']; ?>" </script>
<script type="text/javascript" src="<?=BASE_URI?>js/profile.js"></script>

<style type="text/css">
.changepic {
	position:absolute;
	width:100%;
	left:0;
	height:100%;
	background:rgba(0,0,0,.6);
	border-radius:12.47rem;   
	border: solid #009EA1 4px; 
		transition: background 0.2s ease,
    	padding 0.8s linear,
    	border 0.21s ease;	
}
.showiconX {
    transition:  0.2s ease;
    color:#009EA1 !important; position: absolute;
    font-size: 5rem;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
.transX {
  color:transparent !important;
  font-size: 7rem;
}
</style>

<script type="text/javascript">
  $('#change-pic').hover(
    function(){ $(this).addClass('changepic') },
    function(){ $(this).removeClass('changepic') }
  )
  $('#change-pic').hover(
    function(){ $('#dpxmain').addClass('showiconX').removeClass('transX') },
    function(){ $('#dpxmain').removeClass('showiconX').addClass('transX') }
)
</script>